<template>
    <div class="fxkh-wrapper">
        <el-col :span="4">
            <ul class="fxkh-btns">
                <li class="selected">实时雨情</li>
                <!-- <li>长江水位</li> -->
                <li>水库水情</li> 
                <li>河道水情</li>
                <li>天气预报</li>
                <li>防汛调度</li>
            </ul>
        </el-col>
        <el-col v-show="!fxkhTab && !fxddTab" :span="20">
            <el-col :span="spanNum">
                <div class="fxkh-content">
                    <ul class="weather-tab">
                        <li value="weather1d" class="selected">今天</li>
                        <li value="weather">7天</li>
                        <li value="weather15d">8-15天</li>
                        <li value="radar">雷达图</li>
                        <li value="satellite">卫星图</li>
                    </ul>
                    <div v-show="!cityState" :class="coverImgDiv" style="position:absolute;background-color:transparent;left:60px;top:80px;"></div>
                    <div v-show="!cityState" style="position:absolute;height:30px;width:260px;float:right;background-color:#f9f9f9;right:40px;top:40px;z-index:1003"></div>
                    <div v-show="!cityState" :class="coverTabDiv" style="position:absolute;height:30px;width:160px;float:right;background-color:#f9f9f9;right:40px;z-index:1003">
                        <div class="zoom" @click="enlargeWindow">
                        放大
                        </div>
                    </div>
                    <div :class="boxsize" style="overflow:hidden;border:0px"> 
                        <div :class="boxmargin" style="width:1200px;height:1200px;"> 
                            <iframe id='weatherIframe' :src='weatherReportUrl' width="1200" height="1280" scrolling="no"></iframe> 
                        </div> 
                    </div> 
                </div>
            </el-col>
            <el-col :span="4" v-show="cityState">
                <ul class="fxkh-citys">
                    <li class="selected">黄州区</li>
                    <li>麻城市</li>
                    <li>武穴市</li>
                    <li>团风县</li>
                    <li>浠水县</li>
                    <li>罗田县</li>
                    <li>英山县</li>
                    <li>蕲春县</li>
                    <li>黄梅县</li>
                    <li>红安县</li>
                </ul>
            </el-col>
        </el-col>
        <el-col v-show="fxddTab" :span="20">
          <iframe style="width: 100%;height: 700px" src="/door/uploadfiles/null1511251044.pdf"></iframe>
        </el-col>
        <el-col v-show="fxkhTab" :span="20">
            <el-row style="margin:12px;">
              <el-col v-if="this.tabText=='实时雨情'" :span="10" :offset="11">
                  <el-date-picker
                    v-model="keywordstime1"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:00:00"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
              </el-col>
              <el-col v-if="this.tabText!=='实时雨情'" :span="10" :offset="11">
                  <el-date-picker
                    v-model="keywordstime2"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" plain icon="el-icon-search" @click="primaryTime">搜索</el-button>
              </el-col>
            </el-row> 

            <div>

            </div>

            <el-table
              v-if="this.tabText=='实时雨情'"
              :data="tableData1"
              border
              stripe
              style="width: 100%"
              :header-row-style="headerClass"
              v-loading="tLoading" element-loading-text="加载中...">
              <el-table-column
                prop="xsnm"
                label="县市区名">
              </el-table-column>
              <el-table-column
                prop="stnm"
                label="测站名称">
              </el-table-column>
              <el-table-column
                prop="xznm"
                label="乡镇名">
              </el-table-column>
              <el-table-column
                prop="drp"
                label="计量雨量">
              </el-table-column>
              
              <el-table-column
                prop="xsnm"
                label="县市区名">
              </el-table-column>
              <el-table-column
                prop="stnm"
                label="测站名称">
              </el-table-column>
              <el-table-column
                prop="xznm"
                label="乡镇名">
              </el-table-column>
              <el-table-column
                prop="drp"
                label="计量雨量">
              </el-table-column>
            </el-table>

            <el-table
              v-if="this.tabText=='水库水情'"
              :data="tableData2"
              border
              stripe
              :header-row-style="headerClass"
              style="width: 100%"
               v-loading="tLoading" element-loading-text="加载中...">
              <el-table-column
                prop="xsnm"
                label="县市区名">
              </el-table-column>
              <el-table-column
                prop="stnm"
                label="水库名称">
              </el-table-column>
              <el-table-column
                prop="bdgh"
                label="坝顶高程">
              </el-table-column>
              <el-table-column
                prop="knsw"
                label="库内水位">
              </el-table-column>
              <el-table-column
                prop="xsl"
                label="蓄水量">
              </el-table-column>
              <el-table-column
                prop="yxxs"
                label="有效蓄水">
              </el-table-column>
              <el-table-column
                prop="ssgll"
                label="输水管流量">
              </el-table-column>
              <el-table-column
                prop="yhll"
                label="溢洪流量">
              </el-table-column>
              <el-table-column
                prop="xxsw"
                label="汛限水位">
              </el-table-column>
              <el-table-column
                prop="lszgsw"
                label="历史最高水位">
              </el-table-column>
              <el-table-column
                prop="bxxsw"
                label="比汛限水位">
              </el-table-column>
              <el-table-column
                prop="blszgsw"
                label="比历史最高水位">
              </el-table-column>
            </el-table>

            <el-table
              v-if="this.tabText=='河道水情'"
              :data="tableData3"
              border
              stripe
              :header-row-style="headerClass"
              style="width: 100%"
               v-loading="tLoading" element-loading-text="加载中...">
              <el-table-column
                prop="hnm"
                label="河名">
              </el-table-column>
              <el-table-column
                prop="stnm"
                label="站名">
              </el-table-column>
              <el-table-column
                prop="sw"
                label="水位">
              </el-table-column>
              <el-table-column
                prop="ll"
                label="流量">
              </el-table-column>
              <el-table-column
                prop="ss"
                label="水势">
              </el-table-column>
              <el-table-column
                prop="bzr"
                label="比昨日">
              </el-table-column>
              <el-table-column
                prop="bzsw"
                label="保证水位">
              </el-table-column>
              <el-table-column
                prop="jjsw"
                label="警戒水位">
              </el-table-column>
              <el-table-column
                prop="bbzsw"
                label="比保证水位">
              </el-table-column>
              <el-table-column
                prop="bjjsw"
                label="比警戒水位">
              </el-table-column>
            </el-table>

            <div class="clear-float"></div>
            <div class="page-wrapper">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="changeSize" @current-change="pageChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]" :total="total"></el-pagination>
            </div>
        </el-col>
        
        <div style="clear:both;"></div>
    </div>
</template>

<script>
import tableCols from "../../jsons/fxkhData.json";

export default {
  name: "fxkh",
  data: function() {
    return {
      loading: true,
      tLoading:true,
      currentPage:1,
      pageSize:10,
      total:0,
      tabText:'实时雨情',
      keywordstime1: "",
      keywordstime2: "",
      fxkhTab: true,
      fxddTab: false,
      spanNum: 20,
      cityState: true,
      boxsize: "box-weather-small", //窗口大小
      boxmargin: "box-margin-small",
      coverImgDiv: "cover-img-small",
      coverTabDiv: "cover-tab-small",
      weatherReportUrl: "",
      city: "黄州区",
      weatherStr: "weather1d",
      cityList: {
        黄州区: "101200511",
        麻城市: "101200503",
        武穴市: "101200509",
        团风县: "101200510",
        浠水县: "101200506",
        罗田县: "101200504",
        英山县: "101200505",
        蕲春县: "101200507",
        黄梅县: "101200508",
        红安县: "101200502"
      },
      cols: [],
      tableData: [],
      tableData1: [],     //水雨情表格数据
      tableData2: [],     //水库表格数据
      tableData3: [],     //江河表格数据

    };
  },
  methods: {
    // getNowFormatDate() {
    //     var date = new Date();
    //     var seperator1 = "-";
    //     var seperator2 = ":";
    //     var month = date.getMonth() + 1;
    //     var strDate = date.getDate();
    //     if (month >= 1 && month <= 9) {
    //         month = "0" + month;
    //     }
    //     if (strDate >= 0 && strDate <= 9) {
    //         strDate = "0" + strDate;
    //     }
    //     var currentdate = [date.getFullYear() ,month , strDate, date.getHours()]
    //     return currentdate;
    // },
    headerClass(row, index){
        return {"background-color": "rgb(150, 200, 255)","color":"black"}
    },
    changeSize(val) {
        this.pageSize = val;
        this.initeTable(this.tabText)
    },
    pageChange(val){
        this.currentPage = val;
        this.initeTable(this.tabText)
    },
    getWeatherReportUrl(cityStr, dateStr) {
      var _url = "http://www.weather.com.cn/";
      if (dateStr == "" || dateStr == undefined)
        _url += this.weatherStr + "/" + this.cityList[cityStr] + ".shtml";
      else if (dateStr == "radar") {
        //雷达图
        this.cityState = false;
        this.spanNum = 24;
        this.boxsize = "box-weather-more";
        this.boxmargin = "box-margin-more";
        this.coverImgDiv = "cover-img-big";
        this.coverTabDiv = "cover-tab-big";
        _url = "http://www.nmc.cn/publish/radar/huazhong.html";
      } else if (dateStr == "satellite") {
        this.cityState = false;
        this.spanNum = 24;
        this.boxsize = "box-weather-big";
        this.boxmargin = "box-margin-big";
        this.coverImgDiv = "cover-img-small";
        this.coverTabDiv = "cover-tab-small";
        _url = "http://www.nmc.cn/publish/satellite/fy2.htm";
      } else {
        this.weatherStr = dateStr;
        this.cityState = true;
        this.spanNum = 20;
        this.boxmargin = "box-margin-small";
        if (dateStr == "weather15d") {
          this.boxsize = "box-weather-mid";
        } else this.boxsize = "box-weather-small";
        _url += dateStr + "/" + this.cityList[cityStr] + ".shtml";
      }

      console.log("新地址为：" + _url);
      this.weatherReportUrl = _url;
      // return _url;
    },
    initLeftBtns() {
      var lis = document.getElementsByClassName("fxkh-btns")[0].children;
      let domObj = this;
      for (var index = 0; index < lis.length; index++) {
        lis[index].onclick = function() {
          var _ul = domObj.$el.getElementsByClassName("fxkh-btns")[0];
          _ul.getElementsByClassName("selected")[0].removeAttribute("class");
          this.setAttribute("class", "selected");
          if (this.textContent == "天气预报") {domObj.fxddTab = false; domObj.fxkhTab = false;}
          else if(this.textContent == "防汛调度") {domObj.fxddTab = true; domObj.fxkhTab = false}
          else {
            domObj.fxkhTab = true;
            domObj.fxddTab = false;
            domObj.tabText=this.textContent;
            domObj.keywords="";
            domObj.currentPage=1;
            domObj.pageSize=10;
            domObj.initeTable(this.textContent);
          }
        };
      }
    },
    initRightBtns() {
      var lis = document.getElementsByClassName("fxkh-citys")[0].children;
      let domObj = this;
      for (var index = 0; index < lis.length; index++) {
        lis[index].onclick = function() {
          domObj.loading = true;
          var _ul = domObj.$el.getElementsByClassName("fxkh-citys")[0];
          _ul.getElementsByClassName("selected")[0].removeAttribute("class");
          this.setAttribute("class", "selected");
          domObj.city = this.textContent;
          domObj.getWeatherReportUrl(this.textContent);
        };
      }
    },
    initTabBtns() {
      var lis = document.getElementsByClassName("weather-tab")[0].children;
      let domObj = this;
      for (var index = 0; index < lis.length; index++) {
        lis[index].onclick = function() {
          domObj.loading = true;
          var _ul = domObj.$el.getElementsByClassName("weather-tab")[0];
          _ul.getElementsByClassName("selected")[0].removeAttribute("class");
          this.setAttribute("class", "selected");
          domObj.getWeatherReportUrl(domObj.city, this.getAttribute("value"));
        };
      }
    },
    enlargeWindow() {
      if (this.coverImgDiv == "cover-img-small") {
        this.$store.commit("TOGGLE_WEATHER_SHOW", "1");
      } else {
        this.$store.commit("TOGGLE_WEATHER_SHOW", "2");
      }
    },
    initeTable(text) {
      var _this=this;
      var askUrl='';
      var askData=[];
      if (text == "实时雨情") {
          _this.tLoading=true;
        // console.log(tableCols.rainStation);
        // this.cols = tableCols.rainStation;
        if(this.keywords==''||this.keywords==null){
          askUrl="GET_TODAY_RAIN_";
          askData=[this.pageSize,this.currentPage]
        }else{
          askUrl="GET_TODAY_RAIN";
          askData=[this.pageSize,this.currentPage,this.keywords]
          console.log(this.keywords);
        }
        this.$$http(askUrl,askData).then(data => {
          // debugger;
          console.log(data)
          _this.tableData1 = data.rows;
          _this.total=parseInt(data.total);
          _this.tLoading=false;
          for(var i=0;i<_this.total;i++){
            // debugger;
            _this.tableData1[i].xsnm = data.rows[i].stlc.substring(0,3);
            _this.tableData1[i].xznm = data.rows[i].stlc.substring(3);
          }
          // console.log(_this.tableData1);
        });
      } else if (text == "水库水情") {
          _this.tLoading=true;
        // this.cols = tableCols.reservoirStation;
        if(this.keywords==''||this.keywords==null){
          askUrl="GET_TODAY_RESERVOIR_";
          askData=[this.pageSize,this.currentPage]
        }else{
          askUrl="GET_TODAY_RESERVOIR";
          askData=[this.pageSize,this.currentPage,this.keywords]
        }
        this.$$http(askUrl,askData).then(data => {
          // console.log(data)
          _this.tableData2 = data.rows;
          _this.total=parseInt(data.total);
          _this.tLoading=false;
        });
      } else if (text == "河道水情") {
          _this.tLoading=true;
        // this.cols = tableCols.riverStation;
        if(this.keywords==''||this.keywords==null){
          askUrl="GET_TODAY_RIVER_";
          askData=[this.pageSize,this.currentPage]
        }else{
          askUrl="GET_TODAY_RIVER";
          askData=[this.pageSize,this.currentPage,this.keywords]
        }
        this.$$http(askUrl,askData).then(data => {
          // console.log(data)
          _this.tableData3 = data.rows;
          _this.total=parseInt(data.total);
          _this.tLoading=false;
        });
      }
    },
    primaryTime(){
      var date=new Date();
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
          month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
      }
      var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +' '+ date.getHours() + ':00:00';

      if(this.tabText=="实时雨情"){
        console.log(this.tabText);
        console.log(this.keywordstime1);
        if(this.keywordstime1 && this.keywordstime1.length>0){
          console.log(this.keywordstime1[0]);
          console.log(this.keywordstime1[1]);
        }else{
          console.log(currentdate)
        }
      }else if(this.tabText=="水库水情" || this.tabText=="河道水情"){
        console.log(this.tabText);
        console.log(this.keywordstime2);
        // console.log(this.keywordstime2);
        if(this.keywordstime2=" " || this.keywordstime2 == null){
          console.log(currentdate)
        }else{
          console.log(this.keywordstime2);
        }
      }
      
    }
  },
  // watch:{
  //   keywords:function(val){
  //     console.log(this.keywords)
  //     var _this=this;
  //     this.initeTable(this.tabText)
  //   }
  // },
  mounted() {
    this.initeTable("实时雨情")
      //初始化链接
    this.getWeatherReportUrl("黄州区");
    
    //初始化左侧菜单
    this.initLeftBtns();
    //初始化右侧菜单
    this.initRightBtns();
    //初始化天气预报菜单
    this.initTabBtns();
    //判断iframe加载进度
    var iframe = document.getElementById("weatherIframe");

    var _this = this;
    // if (iframe.attachEvent) {
    //   iframe.attachEvent("onload", function() {
    //     _this.loading = false;
    //   });
    // } else {
    //   iframe.onload = function() {
    //     _this.loading = false;
    //   };
    // }
  }
};
</script>

<style lang="scss">
.fxkh-wrapper {
  height: 100%;
  // padding: 8px;
  .fxkh-btns {
    margin-top: 35px;
    text-align: center;
    li {
      width: 128px;
      margin: 0 auto;
      margin-bottom: 15px;
      height: 45px;
      line-height: 46px;
      background: #f1f1f1;
      text-align: center;
      display: block;
      a:hover {
        background-color: #2873a6;
      }
    }
    li:hover,
    li.selected {
      cursor: pointer;
      color: #fff;
      background-color: #2873a6;
    }
  }
  .fxkh-citys {
    margin-top: 35px;
    text-align: center;
    li {
      width: 108px;
      margin: 0 auto;
      margin-bottom: 12px;
      height: 30px;
      line-height: 30px;
      background: #f1f1f1;
      text-align: center;
      display: block;
      a:hover {
        background-color: #2873a6;
      }
    }
    li:hover,
    li.selected {
      cursor: pointer;
      color: #fff;
      background-color: #2873a6;
    }
  }
  .fxkh-content {
    margin-top: 15px;
    position: relative;
    .weather-tab {
      margin-left: 42px;
      li {
        float: left;
        // margin-left: 43px;
        background: #d0ebff;
        color: #252525;
        cursor: pointer;
        height: 32px;
        line-height: 32px;
        margin-right: 2px;
        text-align: center;
        width: 134px;
        position: relative;
      }
      li:hover,
      li.selected {
        cursor: pointer;
        background-color: #ecf7ff;
      }
    }
    .zoom {
      right: 100px;
      background: url(/src/assets/img/zoom.png) no-repeat left center;
      padding-left: 20px;
      font-size: 15px;
      line-height: 32px;
      margin-left: 25px;
      cursor: pointer;
    }
  }
}

.box-weather-small {
  width: 700px;
  height: 600px;
  margin-left: 42px;
}
.box-weather-mid {
  width: 700px;
  height: 460px;
  margin-left: 42px;
}
.box-weather-big {
  width: 1000px;
  height: 800px;
  margin-left: 12px;
}
.box-weather-more {
  width: 1000px;
  height: 900px;
  margin-left: 12px;
}
.box-margin-small {
  margin-top: -275px;
  margin-left: -100px;
}
.box-margin-big {
  margin-top: -225px;
  margin-left: -250px;
}
.box-margin-more {
  margin-top: -265px;
  margin-left: -250px;
}
.el-loading-mask {
  opacity: 0.5;
}
.cover-img-small {
  height: 620px;
  width: 855px;
}
.cover-img-big {
  height: 660px;
  width: 855px;
}
.cover-tab-small {
  bottom: 100px;
}
.cover-tab-big {
  bottom: 153px;
}
.page-wrapper{
    text-align: right;
    padding: 10px 0;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: gray;
  }

i.fa-arrow-up{
  color:#f00;
}
i.fa-arrow-down{
  color:green;
}
</style>